<template>
  <div>
    <!-- 指令 -->
    <!-- <Test1 />
    <Test2 />
    <Test3 />
    <Test4 />
    <Test5 />
    <Test6 /> -->

    <!-- 侦听器 -->
    <!-- <Watch1 />
    <Watch2 />
    <Watch3 /> -->

    <!-- 计算属性 -->
    <!-- <Computed /> -->

    <!-- 全局组件及父向子传值 -->
    <!-- <div>
      <div class="test-page">
        <NavBar title="页面1"></NavBar>
        <div>页面1内容</div>
      </div>
      <div class="test-page">
        <NavBar title="页面2"></NavBar>
        <div>页面2内容</div>
      </div>
      <div class="test-page">
        <NavBar></NavBar>
        <div>页面3内容</div>
      </div>
    </div> -->

    <!-- 子向父传值传值 -->
    <TestParent></TestParent>
  </div>
</template>

<style lang="scss">
.test-page {
  height: 300px;
  border: 1px red solid;
  margin-bottom: 10px;
}
</style>

<script>
import Test1 from "@/components/指令/Test1";
import Test2 from "@/components/指令/Test2";
import Test3 from "@/components/指令/Test3";
import Test4 from "@/components/指令/Test4";
import Test5 from "@/components/指令/Test5";
import Test6 from "@/components/指令/Test6";
import Watch1 from "@/components/侦听器/Watch1";
import Watch2 from "@/components/侦听器/Watch2";
import Watch3 from "@/components/侦听器/Watch3";
import Computed from "@/components/计算属性/Computed";
import TestParent from "@/components/组件间通信/TestParent";
/* eslint-disable vue/no-unused-components */
export default {
  name: "App",
  components: {
    Test1,
    Test2,
    Test3,
    Test4,
    Test5,
    Test6,
    Watch1,
    Watch2,
    Watch3,
    Computed,
    TestParent,
  },
};
</script>
